<!DOCTYPE html>
<html lang='en'>

<head>
	<meta charset='utf-8' />
	<title>安装vue</title>
	<!-- <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script> -->
	<script src='../js/vue.js'></script>
</head>

<body>
	<div id='app'>

		<h1>今天天气很{{info}}</h1>
		<button @click="change">点击切换天气</button>
	</div>

	<!--
		由vue 管理的函数 使用普通函数
		get() {}
		不由Vue 管理的函数 ajax  使用箭头函数 这样this的指向才是vue
		setTimeout(()=>{

		},100);

	 -->

	<script>
		var vue = new Vue({
			el: '#app',
			data: {
				wheather: true,

			}, methods: {
				change(event) {
					this.wheather = !this.wheather
				}
			}, computed: {
				info: {
					/* 当获取 info 变量时 或依赖发生改变会执行get 函数 */
					get() {
						return this.wheather ? '炎热' : '凉爽'
					},
					/* 当修改 info 变量时会执行set 函数 */
					set() {
						console.log("aaa")
					}

				}
			}, watch: {
				//简写
				wheather(newvalue, oldvalue) {

					setTimeout(() => {
						console.log('wheather我被监视了' + newvalue + oldvalue)
						console.log(this)

					}, 1000);
				}
			}

		});
		//简写
		// vue.$watch('wheather', function (newvalue, oldvalue) {
		// 	console.log('wheather我被监视了111111' + newvalue + oldvalue)
		// })
//watch 可以异步任务 计算属性不可以
	</script>
</body>

</html>